import React, { useState } from 'react'
import { Form, Input, Button, Checkbox } from 'antd'
import { UserOutlined, LockOutlined } from '@ant-design/icons'
import './Style.less'

//组件使用
function useLoginComponent2(props) {
  const [form] = Form.useForm()
  const [username, setUsername] = useState('')
  const [password, setPassWord] = useState('')
  const [disabledflag, setdisableflag] = useState(true)
  const [timer, settimer] = useState('Login')
  const onFinish = (values) => {
    console.log('Received values of form: ', values)
    setdisableflag(true)
    let index = 10
    let timerresult = setInterval(() => {
      index--
      settimer(index + 's之后能点击')
      if (index === 0) {
        clearInterval(timerresult)
        index = 10
        setdisableflag(false)
        settimer('Login')
      }
    }, 1000)
  }

  //验证用户名函数
  function validateUserName(rule, value) {
    if (value) {
      if (value !== 'admin') {
        setUsername({
          validateStatus: 'error',
          errorMsg: '用户名必须是admin',
        })
      } else {
        setUsername({
          validateStatus: 'success',
          errorMsg: null,
        })
      }
    } else {
      setUsername({
        validateStatus: 'error',
        errorMsg: '用户名不能为空',
      })
    }
  }

  //验证密码函数
  function validatePassWord(rule, value) {
    if (value) {
      if (value !== '123') {
        setPassWord({
          validateStatus: 'error',
          errorMsg: '密码只能是123',
        })
      } else {
        setPassWord({
          validateStatus: 'success',
          errorMsg: null,
        })
      }
    } else {
      setPassWord({
        validateStatus: 'error',
        errorMsg: '密码不能为空',
      })
    }
  }
  //失去焦点
  function handlelostfocus() {
    //不能判断error 只能判断success
    if (
      username.validateStatus === 'success' &&
      password.validateStatus === 'success'
    ) {
      setdisableflag(false)
    } else {
      setdisableflag(true)
    }
  }
  return (
    <Form
      name="normal_login2"
      className="login-form"
      initialValues={{
        remember: true,
      }}
      onFinish={onFinish}
      form={form}
    >
      <Form.Item
        name="username"
        rules={[
          {
            validator: async (rule, value) => {
              validateUserName(rule, value)
            },
          },
        ]}
        help={username.errorMsg}
        validateStatus={username.validateStatus}
      >
        <Input
          prefix={<UserOutlined className="site-form-item-icon" />}
          placeholder="Username"
          onBlur={handlelostfocus}
        />
      </Form.Item>
      <Form.Item
        name="password"
        rules={[
          {
            validator: async (rule, value) => {
              validatePassWord(rule, value)
            },
          },
        ]}
        help={password.errorMsg}
        validateStatus={password.validateStatus}
      >
        <Input
          prefix={<LockOutlined className="site-form-item-icon" />}
          type="password"
          placeholder="Password"
          onBlur={handlelostfocus}
        />
      </Form.Item>
      <Form.Item>
        <Form.Item name="remember" valuePropName="checked" noStyle>
          <Checkbox>Remember me</Checkbox>
        </Form.Item>

        <div className="login-form-forgot">Forgot password</div>
      </Form.Item>

      <Form.Item>
        <Button
          type="primary"
          htmlType="submit"
          className="login-form-button"
          disabled={disabledflag}
        >
          {timer}
        </Button>
        Or <div>register now!</div>
      </Form.Item>
    </Form>
  )
}

export default useLoginComponent2
